<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Toggle interactions</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="../../lib/mapbox-gl.js"></script>
    <link href="../../lib/mapbox-gl.css" rel="stylesheet" />
    <script src="../../lib/axios.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .listing-group {
        font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
        font-weight: 600;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        border-radius: 3px;
        max-width: 20%;
        color: #fff;
      }

      .listing-group input[type="checkbox"]:first-child + label {
        border-radius: 3px 3px 0 0;
      }

      .listing-group label:last-child {
        border-radius: 0 0 3px 3px;
        border: none;
      }

      .listing-group input[type="checkbox"] {
        display: none;
      }

      .listing-group input[type="checkbox"] + label {
        background-color: #3386c0;
        display: block;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
      }

      .listing-group input[type="checkbox"] + label {
        background-color: #3386c0;
        text-transform: capitalize;
      }

      .listing-group input[type="checkbox"] + label:hover,
      .listing-group input[type="checkbox"]:checked + label {
        background-color: #4ea0da;
      }

      .listing-group input[type="checkbox"]:checked + label:before {
        content: "✔";
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <nav id="listing-group" class="listing-group">
      <input type="checkbox" id="scrollZoom" checked="checked" />
      <label for="scrollZoom">Scroll zoom</label>
      <input type="checkbox" id="boxZoom" checked="checked" />
      <label for="boxZoom">Box zoom</label>
      <input type="checkbox" id="dragRotate" checked="checked" />
      <label for="dragRotate">Drag rotate</label>
      <input type="checkbox" id="dragPan" checked="checked" />
      <label for="dragPan">Drag pan</label>
      <input type="checkbox" id="keyboard" checked="checked" />
      <label for="keyboard">Keyboard</label>
      <input type="checkbox" id="doubleClickZoom" checked="checked" />
      <label for="doubleClickZoom">Double click zoom</label>
      <input type="checkbox" id="touchZoomRotate" checked="checked" />
      <label for="touchZoomRotate">Touch zoom rotate</label>
    </nav>
    <script>
      let baseDataUrl = `http://${localStorage.getItem(
        "host"
      )}/mapbox-gl-js-offline-examples`;
      axios
        .get(
          baseDataUrl +
            `/resources/styles/${localStorage.getItem(
              "mbtilesStylesName"
            )}.json`
        )
        .then((res) => {
          let data = res.data;
          initMap(data);
        })
        .catch((err) => {
          console.error(err);
        });

      function initMap(style) {
        let map = new mapboxgl.Map({
          container: "map",
          center: [116.392, 39.913],
          zoom: 14,
          bearing: -2.5,
          style: style,
        });

        document
          .getElementById("listing-group")
          .addEventListener("change", function (e) {
            var handler = e.target.id;
            if (e.target.checked) {
              map[handler].enable();
            } else {
              map[handler].disable();
            }
          });
      }
    </script>
  </body>
</html>
